<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>用户类别:</span>
        <select class="select" v-model="gradeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>年级:</span>
        <select class="select" v-model="subjectSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in subjectOption" :label="item.subject" :value="key"></option>
        </select>
        <span>学校:</span>
        <select class="select" v-model="subjectSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in subjectOption" :label="item.subject" :value="key"></option>
        </select>
        <el-button type="primary" v-on:click="nameSearch" size="small">确认</el-button>
        <div class="right-btn">
          <el-button type="primary" size="small">导出</el-button>
        </div>
      </div>
    </div>

    <div class="model query">
      <img :src="IMGBASE64.JIAOSHIXINXICHAXUN2X" class="pink">
      <span class="title">意见反馈</span>
      <div class="kong"></div>
      <template>
        <el-table :data="tablemsg" style="width: 100%">
          <el-table-column prop="id" label="#" align="center"></el-table-column>
          <el-table-column prop="name" label="微信昵称" align="center"></el-table-column>
          <el-table-column prop="idNo" label="意见内容" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="education" label="学生/教师年级" align="center"></el-table-column>
          <el-table-column prop="university" label="职位" align="center"></el-table-column>
          <el-table-column prop="major" label="学校" align="center"></el-table-column>
          <el-table-column prop="position" label="创建时间" align="center"></el-table-column>
        </el-table>
      </template>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      teaName: null,
      teacherData: [],
      gradeSelect: null,
      gradeOption: [],
      subjectSelect: null,
      subjectOption: [],
      tablemsg: [
        {
          id: '1',
          name: '欧阳俊逸',
          IDcardNum: '44013401234021340234',
          qualifications: '本科',
          gradeSchool: '华南师范大学',
          want: '教师',
          career: '5年',
          job: '一级教师',
          phone: '123123123'
        },
        {
          id: '2',
          name: '欧阳俊逸',
          IDcardNum: '44013401234021340234',
          qualifications: '本科',
          gradeSchool: '华南师范大学',
          want: '教师',
          career: '5年',
          job: '一级教师',
          phone: '123123123'
        },
        {
          id: '3',
          name: '欧阳俊逸',
          IDcardNum: '44013401234021340234',
          qualifications: '本科',
          gradeSchool: '华南师范大学',
          want: '教师',
          career: '5年',
          job: '一级教师',
          phone: '123123123'
        }]
    }
  },
  methods: {
    nameSearch () {
      this.$http.post('http://119.23.36.128:8020/yxt-web/signup/teacher/query', {
        studentName: this.stuName
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data)
          this.tablemsg = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.gradeSelect = null
      this.subjectSelect = null
      this.teaName = null
    },
    getGradeData () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'grade/info', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSubjectData () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'teacher/subject', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.subjectOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getStudentNameData()
    }
  },
  mounted () {
    this.getGradeData()
    this.getSubjectData()
    this.xtoken = {'yxt-xtoken': localStorage.xtoken}
    this.$http.post('http://119.23.36.128:8020/yxt-web/signup/teacher/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.tablemsg = response.data.data.content
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
    }
    .select{
      width: 10%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .middle{
      width: 36%;
      display: inline-block;
      margin-left: 10%;
      &-text{
        width: 36%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
    }
    .right-btn{
      float: right;
      margin-right: 2%;
      a
      {
        text-decoration: none;
        color: white;
      }
    }
  }
</style>
